<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // var a = 40;
        // function b() {
        //     console.log(a);
        // }
        // function f() {
        //     var a = 20;
        //     b()
        // }
        // f()

        test()

        function test() {
            const arr = [4, 3, 2, 1];
            // arr.forEach(v => {
            //     console.log(v)
            // })
            arr.forEach(async v => {
                // console.log(v)
                const res = await fn(v);
                console.log(res)
            })

            // async 4 => {
            //     // console.log(v)
            //     const res = await fn(v);
            //     console.log(res)
            // }

            // async 3 => {
            //     // console.log(v)
            //     const res = await fn(v);
            //     console.log(res)
            // }

            // async 2 => {
            //     // console.log(v)
            //     const res = await fn(v);
            //     console.log(res)
            // }

            // async 1 => {
            //     // console.log(v)
            //     const res = await fn(v);
            //     console.log(res)
            // }

            console.log('end');
        }


        function fn(x) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(x);
                }, 100 * x)
            })
        }
    </script>
</body>

</html>